<template>
  <div class="app-container calendar-list-container nz-product">
    <el-table :data="list"
              v-loading.body="isLoading"
              border
              fit
              highlight-current-row
              style="width: 100%"
    >
      <el-table-column align="center" label="姓名" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.userMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="产品">
        <template slot-scope="scope">
          <span>{{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column mwidth="150" label="数量">
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handleCheck(scope.row)"
                     size="small"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <check-dialog :dialogCheckVisible="dialogCheckVisible"
                  :checkTemp="checkTemp"
                  @close="handleCloseDialog"
    ></check-dialog>
  </div>

</template>

<script>
  import { getList } from '@/api/nzHezuo'
  import CheckDialog from './components/CheckDialog'

  export default {
    components: {
      CheckDialog
    },
    data() {
      return {
        list: null,
        isLoading: false,
        dialogCheckVisible: false,
        checkTemp: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        getList('nz').then(res => {
          const items = res.data.items
          console.log(items)
          this.list = items
          this.isLoading = false
        })
      },
      handleCheck(row) {
        this.checkTemp = Object.assign({}, row) // copy obj
        this.dialogCheckVisible = true
      },
      handleCloseDialog(bool) {
        this.checkTemp = {}
        this.dialogCheckVisible = bool
      }
    }
  }
</script>

<style scoped>

</style>

